<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Line-height Font Testing</title>

        <link href="fontTypes.css" rel="stylesheet" />

        <style type="text/css" media="all">

        form {
	        position: relative;
	        z-index: 2;
	        }
        form table {
	        border-bottom: 1px solid #DDD;
	        }
        form table th, form table td {
	        text-align: left; padding: 0.1em 0.5em;
	        }
        form table tr.odd {
	        background: #DDD;
	        }
        form table tr.even {
	        background: #EEE;
	        }

        #chamber {
	        font-family: FuturaBold;
	        font-size: 10px;
	        line-height: normal;
	        position: absolute;
	        z-index: 1;
	        top: 0;
	        right: 0;
	        }
        #chamber .wrap {
	        border: 1px solid #AAA;
	        background: #EEE url(ruler.gif) 0 0 no-repeat;
	        padding: 20px;
	        margin: 10px;
	        width: 800px;
	        white-space: nowrap;
	        }
        #chamber .wrap .test {
	        background: url(stripes.gif) 0 0 repeat;
	        padding-top: 1px;
	        overflow: hidden;
	        border-left: 0;
	        }
        #chamber #t10 div {
	        font-size: 10px;
	        }
        #chamber #t25 div {
	        font-size: 25px;
	        }
        #chamber #t50 div {
	        font-size: 50px;
	        }
        #chamber #t100 div {
	        font-size: 70px;
	        }
        #chamber #t1000 div {
	        font-size: 100px;
	        }
        #chamber #t10000 div {
	        font-size: 120px;
	        }
        </style>

        <script type="text/javascript">

        function getElementsByClassName(oElm, strTagName, strClassName){
        /*
	        Written by Jonathan Snook, http://www.snook.ca/jonathan
	        Add-ons by Robert Nyman, http://www.robertnyman.com
        */
	        var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	        var arrReturnElements = new Array();
	        strClassName = strClassName.replace(/\-/g, "\\-");
	        var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
	        var oElement;
	        for(var i=0; i<arrElements.length; i++){
		        oElement = arrElements[i];		
		        if(oRegExp.test(oElement.className)){
			        arrReturnElements.push(oElement);
		        }	
	        }
	        return (arrReturnElements)
        }

        function setFamily(name) {
	        var chamber = document.getElementById("chamber");
	        if (!name) {
		        var menu = document.getElementById("menu");
		        name = menu.options[menu.selectedIndex].text;
	        }
	        var tests = getElementsByClassName(chamber, "div", "test");
	        for (test in tests) {
		        tests[test].style.fontFamily = name + ", Arial";
	        }
	        inform();
        }

        function inform() {
           
	        var ids = new Array("10","25","50","100","1000","10000");
	        for (id in ids) {
		        var wrap = document.getElementById("t"+ids[id]);
		        var test = getElementsByClassName(wrap, "div", "test");
		        test[0].innerHTML = document.getElementById("text").value;
		        var height = test[0].offsetHeight - 1;

		        var readout = document.getElementById("r"+ids[id]);
		        var lh = getElementsByClassName(readout, "td", "lh");
		        var ne = getElementsByClassName(readout, "td", "ne");
		        lh[0].innerHTML = height;
		        ne[0].innerHTML = height/ids[id];
	        }
        }

        </script>

    </head>
<body onload="inform();">

    <form action="#" method="">

        <table cellspacing="0" id="readout">
            <tbody>
                <tr class="even">
                    <th scope="row">Text</th>
                    <td colspan="2">
                        <input onkeyup="setFamily(); return false;" name="text" id="text" type="text" value="Oy!" />
                    </td>
                </tr>
                <tr class="odd">
                    <th scope="row">Font face</th>
                    <td colspan="2">
                        <select onchange="setFamily(''); return false;" id="menu">
                            <option>Times New Roman</option>                            
                            <option>Georgia</option>
                            <option>Arial</option>                           
                            <option>Verdana</option>                           
                            <option>Courier New</option>                            
                            <option>Comic Sans MS</option>
                        </select>

                    </td>
                </tr>
                <tr class="even">
                    <th></th>
                    <th scope="col">Height of line box</th>
                    <th scope="col"><code>normal</code> equivalent</th>
                </tr>
                <tr class="odd" id="r10">
                    <th scope="row">10px</th>
                    <td class="lh">14</td>
                    <td class="ne">1.4</td>
                </tr>
                <tr class="even" id="r25">
                    <th scope="row">25px</th>
                    <td class="lh">34</td>
                    <td class="ne">1.36</td>
                </tr>
                <tr class="odd" id="r50">
                    <th scope="row">50px</th>
                    <td class="lh">71</td>
                    <td class="ne">1.42</td>
                </tr>
                <tr class="even" id="r100">
                    <th scope="row">70px</th>
                    <td class="lh">140</td>
                    <td class="ne">1.4</td>
                </tr>
                <tr class="odd" id="r1000">
                    <th scope="row">100px</th>
                    <td class="lh">1394</td>
                    <td class="ne">1.394</td>
                </tr>
                <tr class="odd" id="r10000">
                    <th scope="row">120px</th>
                    <td class="lh">13936</td>
                    <td class="ne">1.3936</td>
                </tr>
            </tbody>
        </table>

    </form>


    <div id="chamber">
        <div id="t10" class="wrap">
            <div class="test" style="font-family: 'Times New Roman', Webdings;">Oy!</div>
        </div>
        <div id="t25" class="wrap">
            <div class="test" style="font-family: 'Times New Roman', Webdings;">Oy!</div>
        </div>
        <div id="t50" class="wrap">
            <div class="test" style="font-family: 'Times New Roman', Webdings;">Oy!</div>
        </div>
        <div id="t100" class="wrap">
            <div class="test" style="font-family: 'Times New Roman', Webdings;">Oy!</div>
        </div>
        <div id="t1000" class="wrap">
            <div class="test" style="font-family: 'Times New Roman', Webdings;">Oy!</div>
        </div>
        <div id="t10000" class="wrap">
            <div class="test" style="font-family: 'Times New Roman', Webdings;">Oy!</div>
        </div>
    </div>




</body>

</html>